<!-- 懒得复用了 -->

<template>
  <div class="like-page">
    <van-nav-bar title="喜欢" fixed> </van-nav-bar>
    <div class="like-content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="like-item"
          v-for="item in list"
          :key="item.id"
          @click="detail(item.id)"
        >
          <div class="head">
            <img :src="item.avatar" alt="" />
            <div class="con">
              <p class="title">{{ item.stem }}</p>
              <p class="other">{{ item.creator }} | {{ item.createdAt }}</p>
            </div>
          </div>
          <div class="body">
            {{ removeHtmlTags(item.content) }}
          </div>
          <div class="foot">
            点赞 {{ item.likeCount }} | 浏览 {{ item.views }}
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import myAxios from "@/utils/httpUtil";
export default {
  name: "LikePage",
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
      query: { optType: 1, pageSize: 10, page: 0 },
    };
  },

  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.query.page++;
      myAxios
        .get("/h5/interview/opt/list", {
          params: this.query,
        })
        .then((res) => {
          console.log(res.data.data);
          if (this.list.length === 0) {
            this.list = res.data.data.rows;
          } else {
            this.list.push(...res.data.data.rows);
          }
          // 加载状态结束
          this.loading = false;
          if (res.data.data.total == this.list.length) {
            this.finished = true;
          }
        });
    },
    removeHtmlTags(html) {
      if (!html) return "";
      return html.replace(/<[^>]*>/g, "");
    },
  },
  activated() {
    console.log("获取数据");
    this.query.page = 0;
    this.list = [];
    this.finished = false;
    //如果滚动条在最顶部则调用onLoad
    const scrollTop = document.documentElement.scrollTop;
    if (scrollTop === 0) {
      this.loading = true;
      this.onLoad();
    }
  },
};
</script>

<style lang="less" scoped>
.like-page {
  .like-content {
    padding-top: 46px;
    .like-item {
      margin-bottom: 10px;
      background: #fff;
      padding: 10px 15px;
      .head {
        display: flex;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
        }
        .con {
          flex: 1;
          overflow: hidden;
          padding-left: 15px;
          p {
            margin: 0;
            line-height: 1.5;
            &.title {
              text-overflow: ellipsis;
              overflow: hidden;
              width: 100%;
              white-space: nowrap;
            }
            &.other {
              font-size: 10px;
              color: #999;
            }
          }
        }
      }
      .body {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        max-height: 3.2em;
        word-break: break-all;
      }
      .foot {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
    }
  }
}
</style>
